<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webstorage.html</title>
<script>
function getId(id){return document.getElementById(id);}

window.onload=function(){

	var mid=getId('mid');
	var irum=getId('irum');
	var result=getId('result');

	//local storage or session storage 사용여부
	
	if(window.localStorage==null){
		alert('해당 브러우저는 쓰레기..업그레이드 하세요...');
		return;
	}else{
		//alert('해당 브러우저는 web storage를 지원합니다.');
	}
	
	//local Storage
	getId('btnLS').onclick=function(){
		localStorage.setItem('mid',mid.value);
		localStorage.setItem('irum', irum.value);
	}
	getId('btnLL').onclick=function(){
		var str="Local Storage \n아이디:";
		str+=localStorage.getItem('mid');
		str+="\n성명:";
		str+=localStorage.getItem('irum');
		
		result.value=str;
		
	}
	
	
	//session Storage
	getId('btnSS').onclick=function(){
		sessionStorage.setItem('mid',mid.value);
		sessionStorage.setItem('irum', irum.value);
		
	}
	getId('btnSL').onclick=function(){
		var str="Seession Storage \n";
		str+="아이디:"+sessionStorage.getItem('mid');
		str+='\n성명:'+sessionStorage.getItem('irum');
		result.value=str;
	}
	
	
	//object Storage
	getId('btnOS').onclick=function(){
		var obj=new Object();
		obj.mid=mid.value;
		obj.irum=irum.value;
		var o=JSON.stringify(obj);//문자열화
		result.value="JSON Data : "+o;
		
		localStorage.setItem('o', o);
		
	}
	getId('btnOL').onclick=function(){
		var o=localStorage.getItem('o');
		var obj=JSON.parse(o);
		var str="Object Type Save\n";
		str += "아이디 : " +obj.mid;
		str +="\n 성명 : " +obj.irum;
		
		result.value=str;
	}
	
	
	
	
	
	
	
}



</script>




<style>
.cls{ display: inline-block; width:250px; padding:10px}


#result{
	font-size:22px;
}
</style>


</head>
<body>
<h1> Web Storage Example</h1>

<label> 아이디</label><input type="search" id='mid'><br/>
<label> 성&nbsp;&nbsp;명</label><input type="search" id='irum'><p/>
 
 
 <fieldset class='cls'>
 	<legend>Local Storage</legend>
	 	<input type="button" value='저장' id='btnLS'>
	 	<input type="button" value='읽기' id='btnLL'>
 </fieldset>
 
  <fieldset class='cls'>
 	<legend>Session Storage</legend>
	 	<input type="button" value='저장' id='btnSS'>
	 	<input type="button" value='읽기' id='btnSL'>
 </fieldset>
 
   <fieldset class='cls'>
 	<legend>Object Storage</legend>
	 	<input type="button" value='저장' id='btnOS'>
	 	<input type="button" value='읽기' id='btnOL'>
 </fieldset>
 </p>
 <textarea rows="10" cols="70" id='result'></textarea>

</body>
</html>